import styled from 'styled-components'

// 容器
const Wrapper = styled.div`
  display: flex;
  padding: 5px;

  .left {
    [type='checkbox'] {
      margin-top: 40px;
      border-radius: 10px;
    }
    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      font-weight: bold;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
`

export default function Goods(props) {
  // 监听勾选状态的变化
  const onStateChange = e => props.stateChange({ id: props.id, value: e.target.checked })

  return (
    <Wrapper>
      {/* 左侧的缩略图 */}
      <div className="left">
        <div className="form-check">
          <input
            className="form-check-input"
            type="checkbox"
            checked={props.goods_state}
            id={props.id}
            onChange={onStateChange}
          />
          <label className="form-check-label" htmlFor={props.id}>
            <img src={props.goods_img} alt="" />
          </label>
        </div>
      </div>

      {/* 右侧的内容 */}
      <div className="right">
        <div className="top">{props.goods_name}</div>
        <div className="bottom">
          <span className="price">￥{props.goods_price}</span>
          {props.children}
        </div>
      </div>
    </Wrapper>
  )
}
